<template>
  <div>
    <el-card v-loading="loading" shadow="none">
      <div slot="header">问卷管理
        <el-button type="primary" @click="add()" size="mini">添加</el-button>
      </div>
      <div style="margin-top: 15px;">
        <el-input placeholder="请输入内容" v-model="fieldVal">
          <el-select v-model="field" slot="prepend" placeholder="请选择" style="width:100px">
            <el-option label="标题" value="title"></el-option>>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
      <el-table :data="papers">
        <el-table-column label="创建时间" :formatter="formatCtime">
          <!--<div slot-scope="{row}">
            {{moment(row.ctime).format('YYYY-MM-DD HH:mm:ss')}}
          </div>-->
        </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="users[0].username" label="创建人"></el-table-column>
        <el-table-column prop="classes[0].class_name" label="班级"></el-table-column>
        <el-table-column label="操作" width="350">
          <div slot-scope="{row}">
            <el-button size="mini" type="primary" @click="edit(row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="del(row.id)">删除</el-button>
            <el-button size="mini" type="success" @click="publish(row.id)">发布</el-button>
            <el-button size="mini" type="warning" @click="analysis(row.id)">分析</el-button>
          </div>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next,sizes"
        :total="total"
        background
        :page-size="pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[2,4,10,20]"
        @current-change="currentChange"
        @size-change="sizeChange"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      field: "title",
      fieldVal: "",
      loading: false,
      papers: [],
      pageSize: 4,
      currentPage: 1,
      total: 0,
      pageNums: 0
    };
  },
  created() {
    this.getPapers();
  },
  methods: {
    analysis(id) {
      this.$router.push({ name: "analysis",params: { id } });
    },
    publish(id) {
      this.$router.push({ name: "publish", params: { id } });
    },
    formatCtime: function(row) {
      return moment(row.ctime).format("YYYY-MM-DD HH:mm:ss");
    },
    del(id) {
      this.$confirm("删除", "确定删除吗?", "提示").then(() => {
        this.axios.delete(`/papers/del/${id}`).then(() => {
          this.$message.success("删除成功!");
          this.getPapers();
        });
      });
    },
    add() {
      this.$router.push({
        name: "paperAdd"
      });
    },
    edit(id) {
      this.$router.push({
        name: "paperEdit",
        params: {
          id
        }
      });
    },
    search() {
      this.getPapers();
    },
    currentChange() {
      this.getPapers();
    },
    sizeChange(size) {
      this.pageSize = size;
      this.getPapers();
    },
    //topage(i){
    //  this.currentPage = i;
    //this.getPapers()
    //},
    getPapers() {
      this.loading = true;
      this.axios
        .get("/papers", {
          params: {
            field: this.field,
            fieldVal: this.fieldVal,
            pageSize: this.pageSize,
            currentPage: this.currentPage
          }
        })
        .then(ret => {
          this.loading = false;
          const { data } = ret.data;
          this.papers = data.rows;
          this.total = data.total;
          this.pageNums = Math.ceil(data.total / data.pageSize);
        });
    }
  }
};
</script>

<style scoped>
</style>
